<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="{THEME_PATH}assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="{THEME_PATH}assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{THEME_PATH}assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{THEME_PATH}assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="{THEME_PATH}assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="{THEME_PATH}assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="{THEME_PATH}assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="{THEME_PATH}assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="{THEME_PATH}assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <!-- END THEME GLOBAL STYLES -->
    <!-- BEGIN THEME LAYOUT STYLES -->
    <link href="{THEME_PATH}assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
    <link href="{THEME_PATH}assets/layouts/layout/css/themes/default.min.css" rel="stylesheet" type="text/css" id="style_color" />
    <link href="{THEME_PATH}assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
    <!-- END THEME LAYOUT STYLES -->
</head>
<!-- END HEAD -->

<body class="page-header-fixed page-content-white" style="background: #fff">


<div class="portlet light bordered">
    <div class="portlet-title">
        <div class="tools"> </div>
    </div>
    <div class="portlet-body">
        <table class="table table-striped table-bordered table-hover" id="sample_1">
            <thead>
            <tr>
                {loop $field $t}
                {if $t.use}
                <th>{$t.name}</th>
                {/if}
                {/loop}
            </tr>
            </thead>
            <tbody>
            {loop $list $t}
            <tr>
                {loop $field $i $tt}
                {if $tt.use}
                <td>{dr_list_function($tt.func, $t[$i], [], [])}</td>
                {/if}
                {/loop}
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
</div>
<!--[if lt IE 9]>
<script src="{THEME_PATH}assets/global/plugins/respond.min.js"></script>
<script src="{THEME_PATH}assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="{THEME_PATH}assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{THEME_PATH}assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="{THEME_PATH}assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script  type="text/javascript">


    jQuery(document).ready(function() {
        var table = $('#sample_1');

        var oTable = table.dataTable({

            // Internationalisation. For more info refer to http://datatables.net/manual/i18n
            "language": {
                "aria": {
                    "sortAscending": "：{dr_lang('升序排列')}",
                    "sortDescending": "：{dr_lang('降序排列')}"
                },
                "emptyTable": "{dr_lang('没有数据')}",
                "info": "{dr_lang('显示 _START_ 到 _END_ 的 _TOTAL_ 条数据 ')}",
                "infoEmpty": "{dr_lang('没有列数据')}",
                "infoFiltered": "",
                "lengthMenu": "{dr_lang(' _MENU_ 条 ')}",
                "search": "{dr_lang('搜索')}",
                "zeroRecords": "{dr_lang('没有找到匹配的记录')}"
            },

            // Or you can use remote translation file
            //"language": {
            //   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
            //},


            buttons: [
                { extend: 'print', className: 'btn dark btn-outline', text: '{dr_lang("打印")}' },
                { extend: 'copy', className: 'btn red btn-outline', text: '{dr_lang("复制")}' },
                { extend: 'pdf', className: 'btn green btn-outline', text: '{dr_lang("Pdf文档")}' },
                { extend: 'excel', className: 'btn yellow btn-outline ', text: '{dr_lang("Excel表格")}' },
                { extend: 'csv', className: 'btn purple btn-outline ', text: '{dr_lang("Csv格式")}' },
                { extend: 'colvis', className: 'btn dark btn-outline', text: '{dr_lang("字段选择")}'}
            ],

            // setup responsive extension: http://datatables.net/extensions/responsive/
            responsive: true,

            //"ordering": false, disable column ordering 
            //"paging": false, disable pagination

            "order": [
                [0, 'asc']
            ],

            "lengthMenu": [
                [5, 10, 15, 20, -1],
                [5, 10, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "pageLength": 10,

            "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

            // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
            // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
            // So when dropdowns used the scrollable div should be removed. 
            //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        });
    });


</script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="{THEME_PATH}assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</body>
</html>